<template>
    <div >  
        <el-table
                :data="tableData.filter(data => !search || data.realName.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%"
                stripe
                id="table">
            <el-table-column
                    prop="name"
                    label="账号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码"
                    width="120">
            </el-table-column>
        </el-table>
        <!--给按钮绑定事件-->
        <div class="toexcel">
            <el-button 
             @click="exportExcel" 
             type="info" 
             round
             class="button" 
             style=" position:absolute; bottom:5px; right:50px"
             >导出当前页用户信息
             </el-button>
        </div>
        
<!-- 分页 -->
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="page">
        </el-pagination>
        
    </div>
</template>

<script>
    // 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default {
    name: "javascriptthree",
        data() {
            return {
                pageSize:'',
                total:'',
                tableData: [],
                search:'',
            }
        },
        methods: {
            exportExcel() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#table"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "管理员信息.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        },
        
            page(currentPage){
                const _this = this
                axios.get('http://localhost:8181/book/adminfindAll/'+(currentPage-1)+'/10').then(function(resp){
                    console.log(resp)
                    _this.tableData = resp.data.content
                    _this.pageSize = resp.data.size
                    _this.total = resp.data.totalElements
                })
            }   
        },
            created() {
                const _this = this
                axios.get('http://localhost:8181/book/adminfindAll/0/10').then(function(resp){
                   console.log(resp)
                    _this.tableData = resp.data.content
                    _this.pageSize = resp.data.size
                    _this.total = resp.data.totalElements
                })
            },
    }
</script>
<style scoped>
.table {
    width: 100%;
    height: 300px;
    }
.toexcel {
  cursor: pointer;
  cursor: hand;
  width: 70px;
  height: 34px;
}
</style>